<!-- @format -->

<template>
  <el-form-item :style="'width:' + width" v-bind="$attrs" v-on="$listeners" :rules="rule">
    <slot></slot>
  </el-form-item>
</template>
<script>
export default {
  name: 'nu-form-item',
  props: {
    width: {
      type: String,
      default: () => '276px',
    },
    rules: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    if (this.rules) {
      let ruleArr = this.rules; /* 校验规则数组 */
      for (let i = 0, len = ruleArr.length; i < len; i++) {
        if (ruleArr[i]['reg'] !== undefined) {
          ruleArr[i]['validator'] = this.ruleMethods(ruleArr[i]['reg'], ruleArr[i]['errormes']);
          delete ruleArr[i]['reg'];
          delete ruleArr[i]['errormes'];
          this.rule.push(ruleArr[i]);
        } else {
          this.rule.push(ruleArr[i]);
        }
      }
    } else {
      this.rule = [];
    }
  },
  // beforeUpdate() {
  //   if (this.rules) {
  //     let ruleArr = this.rules; /* 校验规则数组 */
  //     for (let i = 0, len = ruleArr.length; i < len; i++) {
  //       if (ruleArr[i]['reg'] !== undefined) {
  //         ruleArr[i]['validator'] = this.ruleMethods(ruleArr[i]['reg'], ruleArr[i]['errormes']);
  //         delete ruleArr[i]['reg'];
  //         delete ruleArr[i]['errormes'];
  //         this.rule.push(ruleArr[i]);
  //       } else {
  //         this.rule.push(ruleArr[i]);
  //       }
  //     }
  //   } else {
  //     this.rule = [];
  //   }
  // },
  data() {
    return {
      rule: [],
    };
  },
  methods: {
    // 正则校验方法
    ruleMethods(reg, mes) {
      return function (rule, value, callback) {
        let regs = new RegExp(reg, 'g');
        let result = regs.test(value);
        if (!value) {
          return callback(new Error('请输入'));
        } else if (!result) {
          return callback(new Error(`校验错误,${mes}`));
        } else {
          return callback();
        }
      };
    },
  },
  watch: {
    rules: {
      handler(n, o) {
        this.rule = []
        if (n) {
          let ruleArr = n; /* 校验规则数组 */
          for (let i = 0, len = ruleArr.length; i < len; i++) {
            if (ruleArr[i]['reg'] !== undefined) {
              ruleArr[i]['validator'] = this.ruleMethods(ruleArr[i]['reg'], ruleArr[i]['errormes']);
              delete ruleArr[i]['reg'];
              delete ruleArr[i]['errormes'];
              this.rule.push(ruleArr[i]);
            } else {
              this.rule.push(ruleArr[i]);
            }
          }
        } else {
          this.rule = [];
        }
      },
    },
  },
};
</script>
<style scoped>
::v-deep .el-form-item__label {
  color: var(--input-color);
  white-space: nowrap;
}

::v-deep .el-input__inner {
  /* border: var(--input-border) !important; */
  /* background-color: var(--input-bgc); */
  background: var(--input-bgc);
}

::v-deep .el-input-group__prepend {
  background-color: var(--input-bgc);
  color: var(--input-color);
}

::v-deep .el-icon-arrow-up:before {
  content: '\e78f';
  color: #000;
}

::v-deep .el-form-item__label {
  font-weight: 500;
  line-height: 42px;
}
</style>
<style>
.el-select-dropdown__wrap {
  margin-bottom: 0px !important;
}
</style>
